<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" />
    <div class="container">
      <el-card class="containerCard" shadow="always" :body-style="{ padding: '0' }">
        <div class="containerCardMain">
          <!-- 左 -->
          <div class="containerCardLeft">
            <!-- 左 -->
            <div class="containerCardLeftL">
              <h1 class="containerCardLeftLH1">选择指令</h1>
              <Table :tableData="tableData" :tableHeader="tableHeader" :TableHeight="595" />
            </div>
            <!-- 右 -->
            <div class="containerCardLeftR">
              <h1 class="containerCardLeftLH1">选择轮次</h1>
              <Table :tableData="tableData2" :tableHeader="tableHeader2" :TableHeight="595" />
            </div>
          </div>

          <!-- 右 -->
          <div class="containerCardRight">
            <Table :tableData="tableData" :tableHeader="tableHeader3" :TableHeight="575" />
          </div>
        </div>

        <div class="MainRightBottom" slot="header">
          <div>
            <el-button style="background-color: #e7e7e7; width: 60px; color: #000000; border: none" type="info" size="small">保存</el-button>
            <el-button style="background-color: #f89027; width: 60px" type="warning" size="small">打印</el-button>
          </div>
        </div>
        <!-- card body -->
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'DiscretionaryAccount'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectLabel: '部门',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '111111',
        optionLabel: 'option1'
      },
      {
        optionKey: '2',
        optionValue: '222222',
        optionLabel: 'option2'
      },
      {
        optionKey: '3',
        optionValue: '333333',
        optionLabel: 'option3'
      },
      {
        optionKey: '4',
        optionValue: '44444',
        optionLabel: 'option4'
      },
      {
        optionKey: '5',
        optionValue: 'option5',
        optionLabel: 'option5'
      },
      {
        optionKey: '6',
        optionValue: 'option6',
        optionLabel: 'option6'
      },
      {
        optionKey: '7',
        optionValue: 'option7',
        optionLabel: 'option7'
      },
      {
        optionKey: '8',
        optionValue: 'option8',
        optionLabel: 'option8'
      },
      {
        optionKey: '9',
        optionValue: 'option9',
        optionLabel: 'option9'
      },
      {
        optionKey: '10',
        optionValue: 'option10',
        optionLabel: 'option10'
      },
      {
        optionKey: '11',
        optionValue: 'option11',
        optionLabel: 'option11'
      },
      {
        optionKey: '12',
        optionValue: 'option12',
        optionLabel: 'option12'
      },
      {
        optionKey: '13',
        optionValue: 'option13',
        optionLabel: 'option13'
      },
      {
        optionKey: '14',
        optionValue: 'option14',
        optionLabel: 'option14'
      },
      {
        optionKey: '15',
        optionValue: 'option15',
        optionLabel: 'option15'
      },
      {
        optionKey: '16',
        optionValue: 'option16',
        optionLabel: 'option16'
      },
      {
        optionKey: '17',
        optionValue: 'option17',
        optionLabel: 'option17'
      },
      {
        optionKey: '18',
        optionValue: 'option18',
        optionLabel: 'option18'
      },
      {
        optionKey: '19',
        optionValue: 'option19',
        optionLabel: 'option19'
      }
    ]
  },
  {
    type: 'input',
    inputLabel: '型体',
    inputDisabled: true,
    inputValue: 'BF21068'
  },
  {
    type: 'input',
    inputLabel: '颜色',
    inputDisabled: true,
    inputValue: '颜色/景色'
  },
  {
    type: 'input',
    inputLabel: '订单量',
    inputDisabled: true,
    inputValue: '624'
  },
  {
    type: 'checkbox',
    checkboxLabel: '收料状况'
  },
  {
    type: 'checkbox',
    checkboxLabel: '发料状况'
  },
  {
    type: 'checkbox',
    checkboxLabel: '库存状况'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'input',
    inputLabel: '指令生产周期',
    inputDisabled: true,
    inputValue: '14'
  }
])
const findData = (a: any) => {
  console.log(a)
}

const tableHeader = ref([
  {
    label: '指令',
    prop: 'customer',
    width: '112px'
  }
])
const tableData = ref([
  {
    customer: '2023-5-5002',
    unInvested: '222222222222222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  }
])

const tableHeader2 = ref([
  {
    label: '轮次',
    prop: 'number',
    width: '112px'
  }
])
const tableData2 = ref([
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  }
])

const tableHeader3 = ref([
  {
    label: '部位',
    prop: 'department',
    width: '112px'
  },
  {
    label: '裁次',
    prop: 'date',
    width: '112px'
  },
  {
    label: '合计(欠数/已制)',
    prop: 'quantity',
    width: '112px'
  },
  {
    label: '派工日期',
    prop: 'department',
    width: '112px'
  },
  {
    label: '采集日期',
    prop: 'date',
    width: '112px'
  },
  {
    label: '35',
    prop: 'quantity',
    width: '75px'
  },
  {
    label: '36',
    prop: 'department',
    width: '75px'
  },
  {
    label: '37',
    prop: 'date',
    width: '75px'
  },
  {
    label: '38',
    prop: 'quantity',
    width: '75px'
  },
  {
    label: '39',
    prop: 'department',
    width: '75px'
  },
  {
    label: '40',
    prop: 'date',
    width: '75px'
  },
  {
    label: '41',
    prop: 'quantity',
    width: '75px'
  },
  {
    label: '42',
    prop: 'department',
    width: '75px'
  },
  {
    label: '43',
    prop: 'date',
    width: '75px'
  },
  {
    label: '44',
    prop: 'quantity',
    width: '75px'
  }
])
const tableData3 = ref([
  {
    department: '部门1',
    date: '2021-05-01',
    quantity: '222222'
  },
  {
    department: '部门2',
    date: '2021-05-01',
    quantity: '222222'
  },
  {
    department: '部门3',
    date: '2021-05-01',
    quantity: '222222'
  },
  {
    department: '部门4',
    date: '2021-05-01',
    quantity: '222222'
  },
  {
    department: '部门5',
    date: '2021-05-01',
    quantity: '222222'
  },
  {
    department: '部门6',
    date: '2021-05-01',
    quantity: '222222'
  },
  {
    department: '部门7',
    date: '2021-05-01',
    quantity: '222222'
  },
  {
    department: '部门8',
    date: '2021-05-01',
    quantity: '222222'
  },
  {
    department: '部门9',
    date: '2021-05-01',
    quantity: '222222'
  },
  {
    department: '部门10',
    date: '2021-05-01',
    quantity: '222222'
  },
  {
    department: '部门11',
    date: '2021-05-01',
    quantity: '222222'
  },
  {
    department: '部门12',
    date: '2021-05-01',
    quantity: '222222'
  },
  {
    department: '部门13',
    date: '2021-05-01',
    quantity: '222222'
  },
  {
    department: '部门14',
    date: '2021-05-01',
    quantity: '222222'
  },
  {
    department: '部门15',
    date: '2021-05-01',
    quantity: '222222'
  },
  {
    department: '部门16',
    date: '2021-05-01',
    quantity: '222222'
  },
  {
    department: '部门17',
    date: '2021-05-01',
    quantity: '222222'
  }
])
</script>

<style lang="less" scoped>
// 整体
.container {
  width: 100%;
  height: 720px;
  margin-top: 20px;

  .containerCardLeft {
    height: 630px;
    display: flex;
  }

  .containerCardRight {
    height: 550px;
    margin-left: 20px;
    margin-top: 53px;
  }
}

// 卡片
.containerCard {
  width: 100%;
  height: 100%;
  box-shadow: none;

  .containerCardMain {
    width: 100%;
    height: 100%;
    display: flex;
    width: 100%;
  }
}

.containerCardLeftL {
  margin-left: 30px;
}

.containerCardLeftR {
  margin-left: 50px;
}

.containerCardLeftLH1 {
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 12px;
}

.MainRightBottom {
  margin-top: 60px;
  display: flex;
  justify-content: right;
}
</style>
